<template>
  <div class="order">
    <navBar title="创建订单" />

    <!-- 地址 -->
    <van-cell-group inset class="addr">
      <van-cell @click="popupShow = true"
      :title="addressInfo?.realName + '   ' + addressInfo?.phone"
      :label="addr" is-link />
    </van-cell-group>

    <!-- 订单详细 -->
    <van-cell-group inset class="content">
      <van-card
        v-for="item in cartInfo" :key="item.id"
        :num="item.cartNum"
        :price="item.truePrice"
        :desc="item.productInfo?.storeInfo"
        :title="item.productInfo?.storeName"
        :thumb="item.productInfo?.image"
      >
        <template #tags>
          <van-tag plain type="danger">{{ item.productInfo?.attrInfo?.sku }}</van-tag>
        </template>
      </van-card>
      <van-cell title="优惠劵" is-link @click="showList = true" />
      <van-cell title="商品价格" :value="payPrice?.result?.totalPrice" />
      <van-cell title="优惠" :value="payPrice?.result?.couponPrice" />
      <van-cell title="运费" :value="payPrice?.result?.payPostage" />
      <van-field label="备注" v-model="mark" placeholder="请输入备注" />
    </van-cell-group>

    <!-- 支付方式 -->
    <van-cell-group inset class="playtype">
      <van-cell icon="shop-o" title="余额" :label="isData?.userInfo?.nowMoney">
        <van-checkbox v-model="change" />
      </van-cell>
      <van-cell icon="shop-o" title="微信" label="暂未开通">
        <van-checkbox disabled />
      </van-cell>
    </van-cell-group>

    <!-- 订单提交 -->
    <van-submit-bar :price="Number(payPrice?.result?.payPrice) * 100 || 0" button-text="提交订单" @submit="onSubmit" />

    <!-- Popup 弹出层 -->
    <van-popup v-model="popupShow" round position="bottom" class="popup">
      <van-contact-card type="add" @click="$router.push('/address')" />
      <van-contact-card
        v-for="item in addrList" :key="item.id"
        @click="isData.addressInfo = item , popupShow = false"
        type="edit"
        :name="item.realName"
        :tel="item.phone"
      />
    </van-popup>

    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 70%; padding-top: 4px;"
    >
      <van-coupon-list />
    </van-popup>
  </div>
</template>

<script>
import { addressList } from '@/api/user/address'
import {
  orderConfirm,
  orderComputed,
  orderCreate,
} from '@/api/order'

export default {
  data() {
    return {
      ids: [], // 购物车id
      popupShow: false,
      showList: false,
      isData: null, // 
      change: true,
      payPrice: null, // 价格
      mark: '', // 备注
      addrList: [], // 联系人列表
    }
  },
  created() {
    const { query: { ids } } = this.$route
    if(!ids) return this.$toast.fail('错误参数~')
    this.ids = ids
    this.orderConfirm()
    this.addressList()
  },
  methods: {
    // 确认订单
    async orderConfirm() {
      const cartId = this.ids?.join ? this.ids?.join(',') : this.ids
      const { data } = await orderConfirm({ cartId })
      // console.log(data);
      this.isData = data
      this.orderComputed()
    },

    // 计算价钱
    async orderComputed() {
      const { data } = await orderComputed({
        addressId: this.addressInfo?.id,
        couponId: null,
        payType: 'yue',
        shipping_type: '1',
        key: this.isData?.orderKey
      })
      this.payPrice = data
      if(!data) return this.$toast.fail('出错了~')
    },

    // 提交订单
    async onSubmit() {
      const res = await orderCreate({
        key: this.isData?.orderKey,
        addressId: this.addressInfo?.id,
        couponId: 0,
        payType: 'yue',
        from: 'h5',
        mark: this.mark,
        shippingType: 1,
        pinkId: 0
      })
      if(res.status === 200) return this.$router.replace(`/orderSate/${ this.isData?.orderKey }`)
      this.$toast.fail(res.msg)
    },

    // 获取联系人列表
    async addressList() {
      const { data } = await addressList()
      console.log(data);
      this.addrList = data || []
    },
  },
  computed: {
    // 收货地址信息
    addressInfo() {
      return this.isData?.addressInfo || {}
    },

    // 地址
    addr() {
      return this.isData?.addressInfo?.province  + this.isData?.addressInfo?.city
      + this.isData?.addressInfo?.district + this.isData?.addressInfo?.detail || ''
    },

    // 商品
    cartInfo() {
      return this.isData?.cartInfo || []
    },
  }
}
</script>
<style lang="scss" scoped>
.order {
  text-align: left;
  .addr {
    margin: 10px 15px;
  }
  .content {
    .van-card {
      background-color: #fff;
      .van-card__price {
        color: var(--red);
      }
    }
  }
  .playtype {
    margin: 10px 15px;
    .van-icon {
      margin-top: 8px;
    }
    .van-checkbox {
      margin-top: 10px;
      justify-content: end;
    }
  }
  .popup {
    min-height: 40%;
    max-height: 60%;
    overflow: auto;
  }
}
</style>